<template>
    <div class="batch-setting-container">
        <div class="head-box">
<!--            <div>-->
<!--                <el-checkbox v-model="checkedAll" @change="selectAll">全选</el-checkbox>-->
<!--            </div>-->
            <i class="el-icon-delete item-icon" @click="delItem"></i>
        </div>
        <div class="content">
            <el-tree
                ref="tree"
                :data="renderList"
                show-checkbox
                node-key="tempId"
                :props="defaultProps"
                :default-expanded-keys="['ALL_OPTIONS']"
                @check-change="handleNodeClick">
            </el-tree>
        </div>
    </div>
</template>

<script lang="ts">
import { Component, PropSync, Vue } from "vue-property-decorator";

@Component
export default class BatchSettings extends Vue {
    @PropSync(
        'list',
        {
            type: Array,
            default: () => {
                return [];
            }
        })
    readonly currentList!: any[];

    // 选中框选项
    checkboxList: any[] = []
    defaultProps = {
        children: "items",
        label: "name"
    }

    // 全选
    checkedAll = false;
    checkList: any[] = []

    get renderList() {
        return this.currentList.length ? [{
            items: this.currentList,
            name: "全部",
            tempId: "ALL_OPTIONS"
        }] : [];
    }

    // 全选
    selectAll() {
        if (this.checkedAll) {
            (this.$refs.tree as any).setCheckedNodes(this.currentList);
        } else {
            (this.$refs.tree as any).setCheckedKeys([]);
        }
        this.handleNodeClick();
    }

    // 节点选择
    handleNodeClick() {
        this.checkList = (this.$refs.tree as any).getCheckedKeys();
    }

    delItem() {
        if (!this.checkList.length) return false;
        this.$confirm("是否确认删除?", "提示")
            .then(() => {
                const spliceItem: any = (list: any, tempId: any) => {
                    for (let i = 0; i < list.length; i++) {
                        if (list[i].tempId === tempId) {
                            if (list[i].itemType === 0) {
                                list.splice(i + 1, 0, ...list[i].items);
                            }
                            list.splice(i, 1);
                        } else if (list[i].items && list[i].items.length) {
                            spliceItem(list[i].items, tempId);
                        }
                    }
                };
                const allIndex = this.checkList.findIndex((cur: any) => cur === "ALL_OPTIONS");
                if (allIndex !== -1) {
                    this.checkList.splice(allIndex, 1);
                }
                this.checkList.forEach((item: any) => {
                    spliceItem(this.currentList, item);
                });
                this.$nextTick(() => {
                    this.checkedAll = this.checkList.length === this.checkboxList.length && this.checkboxList.length > 0;
                });
                this.checkList = [];
            })
            .catch();
    }
}
</script>

<style lang="scss" scoped>
.batch-setting-container {
    .head-box {
        border-bottom: 1px solid #C7CAD3;
        @include flexLayout(flex,right,center);
        .reverse-btn {
            margin-left: 20px;
        }
        .item-icon {
            cursor: pointer;
        }
    }
    .content {
        height: calc(100vh - 490px);
        overflow-y: auto;
        padding: 6px 0;
    }
    .el-checkbox-group {
        p {
            margin: 0;
            line-height: 24px;
            font-size: 14px;
            font-family: "PingFang SC Medium";
            color: #37383a;
        }
    }
}
</style>
